/* iot-platform/assets/css/data-overview.css */

/* 1. 整体三栏布局 */
.overview-wrapper {
    display: flex;
    gap: 24px;
    padding: 24px;
    height: calc(100vh - 64px); /* 视口高度 - 头部高度 */
    overflow: hidden;
}

.overview-left, .overview-center, .overview-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.overview-left { width: 320px; flex-shrink: 0; }
.overview-center { flex-grow: 1; }
.overview-right { width: 300px; flex-shrink: 0; }

/* 2. 左侧栏样式 */
.kpi-stack .overview-kpi-card {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 0;
}
.kpi-stack .overview-kpi-card:last-child { border-bottom: none; }
.kpi-stack .overview-kpi-card .icon-placeholder {
    width: 40px; height: 40px; background-color: #f0f2f5; border-radius: 4px; margin-right: 16px;
}
.overview-kpi-card .value { font-size: 20px; font-weight: bold; }
.overview-kpi-card .label { font-size: 14px; color: #8c8c8c; }

.card-actions .btn-sm { padding: 2px 10px; font-size: 12px; }
.alarm-percentage-list { list-style: none; padding-top: 16px; }
.alarm-percentage-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; }
.alarm-percentage-list .progress-bar { flex-grow: 1; height: 8px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; }
.alarm-percentage-list .progress { height: 100%; background-color: #1890ff; border-radius: 4px; }

.device-type-buttons { display: flex; gap: 16px; margin-top: auto; /* 推到底部 */ }
.device-type-btn {
    flex-grow: 1; height: 80px; border-radius: 50%; border: 1px solid #d9d9d9;
    background-color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.device-type-btn.active { background-color: #1890ff; color: #fff; border-color: #1890ff; }

/* 3. 中间地图样式 */
.overview-center { background-color: #fff; border-radius: 8px; padding: 24px; }
.map-placeholder {
    flex-grow: 1; background-color: #e9eef3; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #ccc; font-weight: bold; position: relative;
}
.map-marker {
    position: absolute; width: 32px; height: 32px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%231890ff" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    transform: translate(-50%, -100%); /* 让尖端对准坐标 */
    cursor: pointer;
}
.map-marker.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23f5222d" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

.map-filters { display: flex; align-items: center; gap: 8px; padding-top: 16px; }
.map-filters .form-select { height: 36px; }
.map-filters button { width: 36px; height: 36px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; }
.map-filters .toggle-btn { margin-left: auto; }

/* 4. 右侧栏样式 */
.ranking-card {
    border: 1px dashed #d9d9d9;
    box-shadow: none;
}
.ranking-card .card-title {
    padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; margin-bottom: 8px;
}
.ranking-list {
    list-style: none;
    counter-reset: ranking-counter;
}
.ranking-list li {
    display: flex; align-items: center; padding: 10px 0;
}
.ranking-list li::before {
    counter-increment: ranking-counter;
    content: counter(ranking-counter);
    width: 20px; height: 20px; border-radius: 50%;
    background-color: #f0f2f5; color: #595959;
    font-size: 12px; text-align: center; line-height: 20px;
    margin-right: 12px;
}
.ranking-list li:nth-child(1)::before,
.ranking-list li:nth-child(2)::before,
.ranking-list li:nth-child(3)::before {
    background-color: #1890ff;
    color: #fff;
}
.ranking-list .name { flex-grow: 1; }
.ranking-list .value { font-weight: 500; }